<template>
  <section id="editor-wrapper">
    <div id="editor-toolbar">

    </div>
    <div id="editor">
      <ckeditor5 v-model="post.content" :editor="editor" @ready="onReady"/>
    </div>

  </section>
</template>
<script>
import CkEditor from '@ckeditor/ckeditor5-vue'
import {editorConfig, editorType} from "./editor.js"
import {DecoupledEditor} from '@ckeditor/ckeditor5-editor-decoupled';

export default {
  components: {
    ckeditor5: CkEditor.component, // 注册 ckeditor 组件
  },
  data() {
    return {
      editor: DecoupledEditor,
      type: editorType,
      post: {
        content: "test"
      }
    }
  },
  methods: {
    getConfig() {
      return editorConfig()
    },
    onReady(editor) {
      // 在编辑区域加上工具栏
      // this.editor = editor;
      // editor.ui.getEditableElement().parentElement.insertBefore(
      //     editor.ui.view.toolbar.element,
      //     editor.ui.getEditableElement()
      // )
    },
    initEditor() {
      DecoupledEditor.create(document.querySelector("#editor"), this.getConfig())
          .then((editor) => {
            const toolbarContainer = document.querySelector("#editor-toolbar");
            toolbarContainer.appendChild(editor.ui.view.toolbar.element);
            editor.setData(this.post.content);//复制表格数据到编辑器
            editor.getData();//获取
            this.editor = editor; //展示
          })
          .catch((error) => {
            console.error(error);
          });
    },

  },
  mounted() {
    this.initEditor();
  },
  /*  mounted() {
      window.addEventListener("keydown", (event) => {
        console.log(event.ctrlKey && event.key === "s")
        if (event.ctrlKey && event.key === "s") {
          event.preventDefault();

          let title = this.editor.plugins.get("Title").getTitle();
          let content = this.editor.plugins.get("Title").getBody();
          this.post = {
            postTitle: title,
            postContent: content,
            userId: 6,
            // createTime: new Date().toLocaleDateString(),
            isOriginal: false,
          }
          console.log("更新内容")

        }
      })

    },*/
}
</script>

<style  lang="scss">
$ck-spacing-standard-custom: 1rem;

#editor-wrapper {
  margin-top: 4vw;
  #editor.ck.ck-editor__editable_inline {
    padding: 0 $ck-spacing-standard-custom;
  }
  #editor figure.table.ck-widget.ck-widget_with-selection-handle{
    width: 50%;
  }
}

</style>
